<script setup lang="ts">
  import { useToggle } from '@vueuse/core';
  import AppIcon from '@/components/common/app/AppIcon.vue';
  import AsideMenu from '@/components/dataShow/AsideMenu.vue';
  import AppLoginLogo from '@/components/common/app/AppLoginLogo.vue';
  import { useAppSettingStore } from '@/store/module/useAppSettingStore';
  const appSettingStore = useAppSettingStore();
</script>

<template>
  <div>
    <div class="py-1 flex items-center px-2 bg-header-bg dark:bg-header-bg-dark">
      <AppIcon
        icon="ant-design:menu-fold-outlined"
        class="text-xl text-menu-text dark:text-menu-text-dark cursor-pointer"
        @click="appSettingStore.toggleMobileMenuOpen"
      />
    </div>
    <el-drawer
      v-model="appSettingStore.configMenu.mobileMenuOpen"
      :with-header="false"
      direction="ltr"
      size="80%"
    >
      <div class="flex-justify-items-center flex-col mobile-aside-logo">
        <AppLoginLogo />
        <AsideMenu />
      </div>
    </el-drawer>
  </div>
</template>

<style lang="scss">
  #app {
    .el-drawer__body {
      @apply bg-header-bg dark:bg-header-bg-dark;
    }
  }
  .mobile-aside-logo {
    h1 {
      @apply text-main-text;
    }
  }
</style>
